import { LitElement, html, css } from 'lit';
import { customElement, property } from 'lit/decorators.js';

/**
 * Tag标签组件
 * @element zss-tag
 */
@customElement('zss-tag')
export class ZssTag extends LitElement {
  static styles = css`
    :host {
      display: inline-flex;
      align-items: center;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      padding: 0 8px;
      height: 24px;
      font-size: var(--zss-font-size-small);
      border-radius: var(--zss-border-radius-base);
      border: 1px solid;
      box-sizing: border-box;
      line-height: 1;
      white-space: nowrap;
    }

    .tag.closable {
      padding-right: 6px;
    }

    .tag-content {
      margin-right: 4px;
    }

    .tag-close {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.2s;
      font-size: 12px;
      margin-left: 2px;
    }

    .tag-close:hover {
      background-color: rgba(0, 0, 0, 0.1);
    }

    /* 类型样式 */
    .tag.primary {
      background-color: var(--zss-color-primary);
      border-color: var(--zss-color-primary);
      color: var(--zss-bg-color);
    }

    .tag.success {
      background-color: var(--zss-color-success);
      border-color: var(--zss-color-success);
      color: var(--zss-bg-color);
    }

    .tag.warning {
      background-color: var(--zss-color-warning);
      border-color: var(--zss-color-warning);
      color: var(--zss-bg-color);
    }

    .tag.danger {
      background-color: var(--zss-color-danger);
      border-color: var(--zss-color-danger);
      color: var(--zss-bg-color);
    }

    .tag.info {
      background-color: var(--zss-color-info);
      border-color: var(--zss-color-info);
      color: var(--zss-bg-color);
    }

    /* 朴素样式 */
    .tag.plain {
      background-color: transparent;
    }

    .tag.plain.primary {
      color: var(--zss-color-primary);
      border-color: var(--zss-color-primary-light-5);
    }

    .tag.plain.success {
      color: var(--zss-color-success);
      border-color: var(--zss-color-success-light-5);
    }

    .tag.plain.warning {
      color: var(--zss-color-warning);
      border-color: var(--zss-color-warning-light-5);
    }

    .tag.plain.danger {
      color: var(--zss-color-danger);
      border-color: var(--zss-color-danger-light-5);
    }

    .tag.plain.info {
      color: var(--zss-color-info);
      border-color: var(--zss-color-info-light-5);
    }

    /* 尺寸 */
    .tag.small {
      height: 20px;
      padding: 0 6px;
      font-size: 12px;
    }

    .tag.small.closable {
      padding-right: 4px;
    }

    .tag.large {
      height: 28px;
      padding: 0 10px;
      font-size: var(--zss-font-size-base);
    }

    .tag.large.closable {
      padding-right: 8px;
    }

    /* 圆角 */
    .tag.round {
      border-radius: 12px;
    }

    .tag.small.round {
      border-radius: 10px;
    }

    .tag.large.round {
      border-radius: 14px;
    }

    /* 标记样式 */
    .tag.mark {
      border-radius: 0 4px 4px 0;
      border-left: none;
      position: relative;
    }

    .tag.mark::before {
      content: '';
      position: absolute;
      left: -4px;
      top: 0;
      bottom: 0;
      width: 4px;
      border-radius: 4px 0 0 4px;
    }

    .tag.mark.primary::before {
      background-color: var(--zss-color-primary);
    }

    .tag.mark.success::before {
      background-color: var(--zss-color-success);
    }

    .tag.mark.warning::before {
      background-color: var(--zss-color-warning);
    }

    .tag.mark.danger::before {
      background-color: var(--zss-color-danger);
    }

    .tag.mark.info::before {
      background-color: var(--zss-color-info);
    }

    /* 禁用状态 */
    .tag.disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }

    .tag.disabled .tag-close {
      cursor: not-allowed;
    }

    .tag.disabled .tag-close:hover {
      background-color: transparent;
    }
  `;

  /**
   * 标签类型
   * @attr type
   */
  @property({ type: String })
  type: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';

  /**
   * 是否可关闭
   * @attr closable
   */
  @property({ type: Boolean })
  closable = false;

  /**
   * 是否禁用
   * @attr disabled
   */
  @property({ type: Boolean })
  disabled = false;

  /**
   * 是否显示为标记
   * @attr mark
   */
  @property({ type: Boolean })
  mark = false;

  /**
   * 是否显示为圆角
   * @attr round
   */
  @property({ type: Boolean })
  round = false;

  /**
   * 是否朴素样式
   * @attr plain
   */
  @property({ type: Boolean })
  plain = false;

  /**
   * 尺寸
   * @attr size
   */
  @property({ type: String })
  size: 'small' | 'default' | 'large' = 'default';

  /**
   * 标签颜色
   * @attr color
   */
  @property({ type: String })
  color = '';

  /**
   * 标签背景色
   * @attr background-color
   */
  @property({ type: String })
  backgroundColor = '';

  /**
   * 标签边框色
   * @attr border-color
   */
  @property({ type: String })
  borderColor = '';

  private handleClose = (e: Event) => {
    e.stopPropagation();
    
    if (!this.disabled) {
      this.dispatchEvent(new CustomEvent('close'));
      this.dispatchEvent(new CustomEvent('change', {
        detail: false
      }));
    }
  };

  private handleClick = () => {
    if (!this.disabled) {
      this.dispatchEvent(new CustomEvent('click'));
    }
  };

  render() {
    const classes = [
      'tag',
      this.type,
      this.size,
      this.closable ? 'closable' : '',
      this.disabled ? 'disabled' : '',
      this.mark ? 'mark' : '',
      this.round ? 'round' : '',
      this.plain ? 'plain' : ''
    ].filter(Boolean).join(' ');

    const style = {
      color: this.color || '',
      backgroundColor: this.backgroundColor || '',
      borderColor: this.borderColor || ''
    };

    return html`
      <span 
        class=${classes}
        style=${Object.entries(style)
          .filter(([_, value]) => value)
          .map(([key, value]) => `${key}: ${value}`)
          .join('; ')}
        @click=${this.handleClick}
      >
        <span class="tag-content">
          <slot></slot>
        </span>
        ${this.closable ? html`
          <span class="tag-close" @click=${this.handleClose}>×</span>
        ` : ''}
      </span>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'zss-tag': ZssTag;
  }
}